import React, { Component } from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { sizes, colors } from 'bee/themes';
import PropTypes, { oneOfType } from 'prop-types';
import noop from 'bee/utils/noop';

export default class ResetPasswordItem extends Component<Props> {
  // setFieldPointer(component) {
  //   console.log(component);
  //   component.setNativeProps({
  //     onFocus: noop,
  //   });
  // }

  render() {
    const {
      title,
      placeholder,
      onChangeText,
      onEndEditing,
      onFocus,
      style,
      reference,
    } = this.props;

    return (
      <View style={[styles.box, style]}>
        <Text style={styles.title}>{title}</Text>
        <TextInput
          ref={reference}
          placeholder={placeholder}
          style={styles.textInput}
          underlineColorAndroid="transparent"
          clearButtonMode="while-editing"
          // clearTextOnFocus
          enablesReturnKeyAutomatically
          keyboardType="default"
          placeholderTextColor={colors['1103']}
          secureTextEntry
          textContentType="password"
          onChangeText={onChangeText}
          onEndEditing={onEndEditing}
          onFocus={onFocus}
          returnKeyType="done"
          // blurOnSubmit={false}
        />
      </View>
    );
  }
}

ResetPasswordItem.propTypes = {
  title: PropTypes.string.isRequired,
  placeholder: PropTypes.string.isRequired,
  onChangeText: PropTypes.func,
  onEndEditing: PropTypes.func,
  onFocus: PropTypes.func,
  style: oneOfType([PropTypes.number, PropTypes.array]),
  reference: PropTypes.string,
};

ResetPasswordItem.defaultProps = {
  onChangeText: noop,
  onEndEditing: noop,
  onFocus: noop,
  style: null,
  reference: null,
};

const styles = StyleSheet.create({
  box: {
    backgroundColor: colors.white,
    paddingHorizontal: px2dp(30),
    height: px2dp(100),
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
  },
  title: {
    fontSize: sizes.f3,
    color: colors['1101'],
  },
  textInput: {
    flex: 1,
    padding: 0,
  },
});
